<template>
  <div class="card" :id="id">
    <div class="card-header pb-0 text-center">{{ psgTypeName }}价格</div>
    <table class="table table-sm mb-1">
      <tbody>
        <tr>
          <td>
            票面价
            <input
              type="text"
              class="form-control"
              v-model.lazy.number="price0"
            />
            <span class="text-muted small">航司的票面价，不参与计算</span>
            <br />
            <span class="text-danger small"
              >自动出票时用于和PAT:A的价格校验</span
            >
          </td>
          <td>
            销售价
            <input
              type="text"
              class="form-control"
              v-model.lazy.number="parValue0"
            />
            <span class="text-muted small">航司的实际卖价</span>
          </td>
          <td>
            税
            <input
              type="text"
              class="form-control"
              v-model.lazy.number="tax0"
            />
            <span class="text-muted small">总的税金</span>
          </td>
         

          <td>
            航司代理费
            <input
              type="text"
              class="form-control"
              v-model.lazy.number="commission0"
            />
            <span class="text-muted small"
              >包含在销售价中的代理费(航司提供)</span
            >
          </td>
          <td>
            自定代理费
            <input
              type="text"
              class="form-control"
              v-model.lazy.number="commission02"
            />
            <span class="text-muted small"
              >包含在销售价中的代理费(代理自供)</span
            >
          </td>
          <td>
            服务费
            <input
              type="text"
              class="form-control"
              v-model.lazy.number="serviceCharge0"
            />
            <span class="text-muted small">服务费/人</span>
          </td>
          <td>
            客户让利
            <input
              type="text"
              class="form-control"
              v-model.lazy.number="discount0"
            />
            <span class="text-muted small">正数表示优惠，负数表示加价</span>
          </td>
        </tr>
        <tr>
          <td class="text-end">客户应付/{{ psgTypeName }}</td>
          <td>
            <input
              type="text"
              class="form-control"
              v-model.lazy.number="amount0"
            />
            <span class="text-muted small">实际应付金额</span>
          </td>
          <td class="text-end">底价/{{ psgTypeName }}</td>
          <td>
            <input
              type="text"
              class="form-control"
              v-model.lazy.number="cost0"
            />
            <span class="text-muted small">实际成本</span>
          </td>
          <td>人数: {{ ticketCount }}</td>
          <td>利润: {{ totalProfit }}</td>
          <td>小计: {{ totalAmount }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  props: {
    id: "",
    psgTypeName: "",
    price: 0,
    parValue: 0,
    tax: 0,
    insurance: 0,
    serviceCharge: 0,
    commission: 0,
    commission2: 0,
    discount: 0,
    amount: 0,
    totalAmount: 0,
    cost: {
      type: Number,
      default: 0,
    },
    totalCost: 0,
    profit: 0,
    totalProfit: 0,

    ticketCount: 0,
    saveMode: 0,
  },
  data: function () {
    return {
      parValue0: this.parValue,
      price0: this.price,
      tax0: this.tax,
      insurance0: this.insurance,
      serviceCharge0: this.serviceCharge,
      discount0: this.discount,
      commission0: this.commission,
      commission02: this.commission2,
      amount0: this.amount,
      saveMode0: this.saveMode,
      profit0: this.profit,
      totalProfit0: this.totalProfit,
      cost0: this.cost,
      totalCost0: this.totalCost,
    };
  },
  watch: {
    price0: function (newValue, oldValue) {
      this.$emit("update:price", newValue);
    },
    parValue0: function (newValue, oldValue) {
      this.$emit("update:parValue", newValue);
      this.calc();
    },
    tax0: function (newValue, oldValue) {
      this.$emit("update:tax", newValue);
      this.calc();
    },
    insurance0: function (newValue, oldValue) {
      this.$emit("update:insurance", newValue);
      this.calc();
    },
    serviceCharge0: function (newValue, oldValue) {
      console.log(newValue);
      this.$emit("update:serviceCharge", newValue);
      this.calc();
    },
    discount0: function (newValue, oldValue) {
      this.$emit("update:discount", newValue);
      this.calc();
    },
    commission0: function (newValue, oldValue) {
      // console.log('watch commission0: ' + newValue)
      this.$emit("update:commission", newValue);
      this.calc();
    },
    commission02: function (newValue, oldValue) {
      this.$emit("update:commission2", newValue);
      this.calc();
    },
    amount0: function (newValue, oldValue) {
      this.calcDiscount();
    },
    cost0: function (newValue, oldValue) {
      this.calcDiscountByCost();
    },
    saveMode0: function (newValue) {
      this.$emit("update:saveMode", newValue);
      this.calc();
    },
    ticketCount: function (newValue) {
      this.calc();
    },
  },
  mounted: function () {
    this.calc();
  },
  methods: {
    calc: function () {
      this.cost0 =
        this.parValue0 +
        this.tax0 +
        this.insurance0 -
        this.commission0 -
        this.commission02;
      this.totalCost0 = this.cost0 * this.ticketCount;

      this.amount0 =
        this.parValue0 +
        this.tax0 +
        this.insurance0 +
        this.serviceCharge0 -
        this.discount0;
      this.totalAmount0 = this.amount0 * this.ticketCount;
      this.calcProfit();

      this.emitAll();
    },
    calcDiscount: function () {
      this.cost0 =
        this.parValue0 +
        this.tax0 +
        this.insurance0 -
        this.commission0 -
        this.commission02;
      this.totalCost0 = this.cost0 * this.ticketCount;

      this.discount0 =
        this.parValue0 +
        this.tax0 +
        this.insurance0 +
        this.serviceCharge0 -
        this.amount0;

      this.totalAmount0 = this.amount0 * this.ticketCount;
      this.calcProfit();

      this.emitAll();
    },
    calcDiscountByCost: function () {
      this.commission0 =
        this.parValue0 +
        this.tax0 +
        this.insurance0 -
        this.cost0 -
        this.commission02;
      this.calcProfit();

      this.emitAll();
    },
    calcProfit: function () {
      this.profit0 = this.mathRound(
        this.commission0 +
          this.commission02 +
          this.serviceCharge0 -
          this.discount0
      );
      this.totalProfit0 = this.mathRound(this.profit0 * this.ticketCount);
    },
    emitAll: function () {
      this.$emit("update:commission", this.commission0);
      this.$emit("update:commission2", this.commission02);
      this.$emit("update:serviceCharge", this.serviceCharge0);
      this.$emit("update:discount", this.discount0);
      this.$emit("update:amount", this.amount0);
      this.$emit("update:totalAmount", this.totalAmount0);
      this.$emit("update:profit", this.profit0);
      this.$emit("update:totalProfit", this.totalProfit0);
      this.$emit("update:cost", this.cost0);
      this.$emit("update:totalCost", this.totalCost0);
    },
    mathRound: function (val) {
      return Math.round(val * 100) / 100;
    },
  },
};
</script>